<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>小猴子图片免费压缩工具</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />

    <link rel="shortcut icon" href="/favicon.ico" />

    <style>
        .span-font-color {
            color: red
        }
        h1 {
            line-height: 60px; color: #fff;
        }
        .i-font-size {
            font-size: 260px
        }
        .success-btn {
            margin: 0 auto;
            display: block;
        }
        .verify-code {
            width: 50% !important;
            height: 38px;
            line-height: 36px;
            border-width: 1px;
            border-style: solid;
            background-color: #fff;
            border-radius: 0 2px 2px 0;
            padding-left: 10px;
            border-color: #e6e6e6;
            outline: 0;
            -webkit-transition: all .3s;
            box-sizing: border-box;
            -webkit-writing-mode: horizontal-tb !important;
            text-rendering: auto;
            letter-spacing: normal;
            word-spacing: normal;
            text-transform: none;
            text-indent: 0px;
            text-shadow: none;
            font-family: inherit;
            font-size: inherit;
            font-style: inherit;
            font-weight: inherit;
        }

        .payment-background-color {
            background-color: #0098da !important;
        }

        .font-text-align {
            text-align: center;
        }

        .font-text-size {
            font-family: "微软雅黑";
            font-size: 12px;
        }
    </style>
</head>
<body>


<div class="layui-col-md12 payment-background-color">
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset4">
            <h1 class="font-text-align">小猴子图片免费压缩工具</h1>
        </div>
    </div>
</div>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12" style="margin-top:50px;">
            <form class="layui-form layui-form-pane"enctype="multipart/form-data" action="/dealWithImage" method="post">

                <div class="layui-form-item">
                    <label class="layui-form-label">选择图片</label>
                    <div class="layui-input-block">
                        <input type="file" id="businessLicense"  name="file" accept=“image/*” placeholder="非必填"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">大小 <span class="span-font-color">*</span></label>
                    <div class="layui-input-block ">
                        <input type="text" maxlength="4" class="verify-code" id="size" lay-verify="required"
                               name="size" autocomplete="off" placeholder="请输入大小，例如：50">
                        <span class="span-font-color">KB</span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <button type="submit"
                            class="layui-btn layui-btn-lg  payment-background-color layui-btn-fluid layui-btn-danger"
                            lay-submit="">压缩并下载
                    </button>
                </div>

            </form>
        </div>
    </div>


</div>


<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form
            , layer = layui.layer
            , $ = layui.$;

        //监听提交
        form.on('submit(demo1)', function (data) {
            var editImage = $("#businessLicense").get(0).files[0];
            var size = $("#size").val()
            var formDate = new FormData();
            formDate.append("file", editImage);
            formDate.append("size", size);
            $.ajax({
                url: 'dealImage',
                type: 'POST',
                processData: false,
                contentType: false,
                async: false,
                data: formDate,
                success: function (result) {
                    console.log(result)

                }
            })
        });


        // 上传图片
        // $(document).on('change', '#businessLicense', function () {
        //   var editImage = $("#businessLicense").get(0).files[0];
        // console.log(editImage)
        //     var formDate = new FormData();
        //     formDate.append("file", editImage);
        //     $.ajax({
        //         url: '/apply/fileUpload',
        //         type: 'POST',
        //         processData: false,
        //         contentType: false,
        //         async: false,
        //         data: formDate,
        //         success: function (result) {
        //             if (result.code == 200) {
        //                 $("#busLicense").val("");
        //                 $("#busLicense").val(result.data);
        //                 layer.msg(result.msg)
        //             } else {
        //                 $("#busLicense").val("");
        //                 layer.msg(result.msg)
        //             }
        //         }
        //     })
        // })

        //
        // // 校验验证码
        // $(document).on('blur', '#verifyCode', function () {
        //     var verifyCode = $("#verifyCode").val();
        //     $.ajax({
        //         url: '/apply/checkVerifyCode',
        //         type: 'POST',
        //         dataType: 'JSON',
        //         data: {
        //             verifyCode: verifyCode
        //         },
        //         success: function (result) {
        //             if (result.code == 200) {
        //                 return true;
        //             } else {
        //                 layer.msg(result.msg)
        //                 return false;
        //             }
        //         }
        //     })
        // });


    });
</script>
</body>
</html>